import { SignIn } from "@clerk/nextjs";
import { APP_NAME } from "@/lib/constants";

export default function SignInPage() {
  return (
    <div className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-50 px-4 py-12 dark:from-gray-900 dark:to-gray-800">
      <div className="mb-8 text-center">
        <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
          登录 {APP_NAME}
        </h1>
        <p className="mt-2 text-gray-600 dark:text-gray-300">
          登录您的账户以访问知识库和聊天功能
        </p>
      </div>
      
      <div className="w-full max-w-md overflow-hidden rounded-xl bg-white/80 shadow-xl backdrop-blur-xl dark:bg-gray-800/80">
        <div className="p-6">
          <SignIn 
            appearance={{
              elements: {
                rootBox: "mx-auto w-full",
                card: "shadow-none",
                headerTitle: "text-center text-2xl font-bold text-gray-900 dark:text-white",
                headerSubtitle: "text-center text-gray-600 dark:text-gray-300",
                formButtonPrimary: "bg-blue-600 hover:bg-blue-700 text-white",
                footerActionLink: "text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300",
              }
            }}
            redirectUrl="/knowledge-bases"
          />
        </div>
      </div>
    </div>
  );
} 